---
// import "graphiql/graphiql.css" -->
// import "@graphiql/plugin-explorer/dist/style.css" -->
import UnionGraphiQL from "#/components/graphiql/react/GraphiQL.tsx"
const template = "splash"
interface Props {}
---

<UnionGraphiQL client:only="react" />

<script>
const asideElement = document.querySelector("aside.right-sidebar-container")
asideElement?.remove()
const paginationElement = document.querySelector(".pagination-links")
paginationElement?.remove()
</script>

<style
  lang="postcss"
  is:global
>
.sl-container {}

body div.page footer {
display: none;
}

.graphiql-container {
height: calc(100vh - var(--sl-nav-height)) !important;
}

.graphiql-execute-button {
background-color: var(--color-accent-500) !important;
}

.graphiql-horizontal-drag-bar {
width: 2px !important;
height: 100% !important;
}

html[data-theme='dark'] {
& .graphiql-toolbar,
.graphiql-editor-tool,
.graphiql-editor-tools,
.CodeMirror-scroll,
.CodeMirror-gutter,
.graphiql-query-editor,
.graphiql-sessions,
.graphiql-session-header,
.monaco-editor {
background-color: #131313 !important;
}

& .graphiql-container,
.graphiql-editors,
.graphiql-editor,
.graphiql-explorer,
.graphiql-dialog,
.graphiql-horizontal-drag-bar {
background-color: #1f1f1f !important;
}

& .graphiql-execute-button svg {
color: #1F1F1F !important;
}
}

.graphiql-query-editor {}

.graphiql-session {
border-radius: 0 0 0.5rem 0.5rem;
}

.graphiql-session-header {
border-radius: 0.5rem 0.5rem 0 0;
}

h1 {
display: none;
}

main[data-pagefind-body] {
padding: 0;
height: 100% !important;
}

.main-pane {
height: 100% !important;
width: 100% !important;
}

.content-panel {
height: 100% !important;
padding: 0;
}

.sl-flex {}

.right-sidebar-container {
display: none;
width: 0px;
}

.sl-markdown-content :not(a, strong, em, del, span, input, code)+ :not(a, strong, em, del, span, input, code, :where(.not-content *)) {
margin: 0;
}

.sl-container,
.sl-markdown-content {
margin: 0;
width: 100%;
height: 100%;
max-width: 100%;
}

#graphiql {
margin-top: 75px;
height: calc(100vh - var(--sl-nav-height));
}

.graphiql-table {
color: #F9F9F9;
}

.graphiql-sidebar {}

.graphiql-tab-add {
visibility: hidden !important;
cursor: default !important;
color: transparent !important;
background: transparent !important;

& svg {
visibility: hidden !important;
color: transparent !important;
}
}
</style>
